<div id="searchOuTree">
    <accordion>
        <accordion-group is-open="true">
            <accordion-heading>
                {{'org_unit' | translate}} <i class="pull-right" ng-class="{'fa fa-chevron-up vertical-center': searchOuTree.open, 'fa fa-chevron-down vertical-center': !searchOuTree.open}"></i>
            </accordion-heading>
            <div class="row" data-stop-propagation="true">
                <script type="text/ng-template" id="orgUnitTree.html">
                    <span class="org-unit-tree-button" ng-click="expandCollapseOrgUnitTree(orgUnit)" ng-show="orgUnit.show && orgUnit.children.length > 0"><i class="fa fa-minus-square-o"></i></span>
                    <span class="org-unit-tree-button" ng-click="expandCollapseOrgUnitTree(orgUnit)" ng-show="(!orgUnit.show && orgUnit.children.length > 0) || (!orgUnit.show && orgUnit.hasChildren)"><i class="fa fa-plus-square-o"></i></span>
                    <span class="org-unit-tree-button" ng-click="advancedSearchValues.orgUnit = orgUnit" ng-class="{'selected-org-unit' : orgUnit.id === advancedSearchValues.orgUnit.id}">{{orgUnit.displayName}}</span>
                    <ul class="tree" id="tree" ng-show="orgUnit.show">
                        <li ng-repeat="orgUnit in orgUnit.children | orderBy:'displayName'" ng-include="'orgUnitTree.html'"></li>
                    </ul>
                </script>
                <ul class="tree" id="tree">
                    <li ng-repeat="orgUnit in orgUnits | orderBy:'displayName'" ng-include="'orgUnitTree.html'"></li>
                </ul>
            </div>                      
        </accordion-group> 
    </accordion>
</div>